<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>


<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="name" id="demoReload" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" data-type="reload" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="commentTable" lay-filter="commentTable"></table>
    </div>
</div>

<script id="tableBar" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-md" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </a>
</script>
<script id="tool" type="text/html">
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="reply">回复</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="look">查看</a>
</script>
<!--<script id="switchState" type="text/html">
    <input type="checkbox" name="state" value="{{d.state}}"
           lay-skin="switch" lay-text="是|否" lay-filter="checkstate" {{d.state==0?"checked":""}} />
</script>-->
<script id="photo" type="text/html">
    {{# if(d.commentImgId!=null){ }}
    <img src="/file/fc/showImg/{{d.commentImgId}}" style="width: 30px;height: 60px;">
    {{# }}}
</script>
<script>
    var $;
    layui.use(['table','form','layer','jquery'],function() {
        var table = layui.table, form = layui.form,
            layer = layui.layer;
        $ = layui.jquery

        //加载表格
        table.render({
            elem: '#commentTable',
            height: 'full-160',
            page: true,
            toolbar: '#tableBar',
            url: '/system/ccc/find',
            cols: [
                [
                    {type: 'numbers', fixed: 'left', style: 'height:70px'},
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'commodityId', title: '商品ID', width: 150},
                    {field: 'userId', title: '用户ID', width: 150},
                    {field: 'score', title: '打分', width: 80 },
                    {field: 'commentContent', title: '商品内容'},
                    {field: 'commentImgId', title: '评论照片', width: 250 ,templet: '#photo', align: 'center'},
                    {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#tool'},
                ]
            ]
        })


        //监听搜索按钮
        form.on('submit(searchBtn)', function (data) {
            var dataForm = data.field;

            table.reload('commentTable', {
                where: {
                    brandName:dataForm.name
                },
                page:{
                    curr:1
                }
            });
        });


        var active = {
            addOrUpdate: function (content) {
                var b = false;
                top.layer.open({
                    type: 2,
                    content: content,
                    area: ['700px', '650px'],
                    btn: ['确认保存', '取消关闭'],
                    btn1: function (i, o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end: function () {
                        if (b) layui.table.reload('commentTable');
                    }
                })
            },
            look:function (content) {
                top.layer.open({
                    type: 2,
                    content: content,
                    area: ['700px', '650px'],

                })
            },
            delete: function (data) {
                $.ajax({
                    type: 'post',
                    url: '/system/ccc/delete',
                    data: data,
                    dataType: 'json',
                    success: function (result) {
                        layer.msg(result.msg)

                        if (result.is) layui.table.reload('commentTable');
                    }

                })

            },
            reply:function (content) {
                var b=false;
                layer.open({
                    type:2,
                    content:content,
                    area:['700px','650px'],
                    btn:['发送','关闭'],
                    btn1:function (i,o) {
                        b=true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function () {
                        if(b) layui.table.reload('commentTable')
                    }
                })
            }


        }

 /*       table.on('toolbar(commentTable)', function (obj) {
            var event = obj.event;
            if ("add" == event) {
                active.addOrUpdate('/page/system/brandAdd');
            }
        })*/

        table.on('tool(commentTable)', function (obj) {
            var event = obj.event;
            if ("look" == event) {
                active.look('/page/system/commentLook/' + obj.data.id);
            } else if ("reply" == event) {
                active.reply('/page/system/commentReply/'+obj.data.id)
            }
        });

    });
</script>
</body>
</html>
